<%--
  Created by IntelliJ IDEA.
  User: M1523
  Date: 2025/3/20
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<script src="../bootstrap/js/jquery-2.1.0.min.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>
    <style>

       .cus-container{
           width: 1368px;
       }
       #user-add .modal-content{
       	padding: 0 20px 20px;	
       }
       #user-edit .modal-content{
       	padding: 0 20px 20px;	
       }
       
    </style>
</head>
<body>
	
    <div class="container cus-container">
        <!-- <h3 class="text-center">用户信息列表</h3> -->

        <div>
            <!-- 搜索框div -->
            <div id="search-user" style="float: left; margin: 10px 0px;">
                <form class="form-inline" action="" method="get">
                    <div class="form-group">
                        <label for="exampleInputName2">用户名</label>
                        <input type="text" name="name" value="" class="form-control" id="exampleInputName2" >
                    </div>
                   
                    <button type="button" class="btn btn-default" onclick="search()">查询</button>
                    <button type="button" class="btn btn-default" onclick="clear()">清空</button>
                </form>    
            </div>
            
            <!-- 添加、删除的按钮 -->
            <div style="float: right;margin: 10px 0px;">
                <a class="btn btn-primary" onclick="openUserAdd()">添加用户</a>
                <a class="btn btn-primary" onclick="deleteByPath()">删除选中</a>
        
            </div>
        </div>

      
       <table class="table table-bordered clearfix" id="user-list">
        <thead>
        	<tr class="bg-primary">
	            <th><input type="checkbox" id="firstCb"></th>
	            <th>编号</th>
	            <th>用户名</th>
	            <th>用户昵称</th>
	            <th>创建时间</th>
	            <th>操作</th> 
	        </tr> 
        </thead> 
        <tbody>
        
        <tr>
            <td><input type="checkbox" name="uid" value=""></td>
            <td>1</td>
            <td>张三丰</td>
            <td>admin123</td>
            <td>1200-01-01</td>
            <td><a class="btn btn-default btn-sm" href="role.jsp">分配角色</a>&nbsp;
                <a class="btn btn-default btn-sm" href="">删除</a>
			</td>
        </tr>
        
         </tbody>      
      </table>

    	<!-- 分页导航 -->
      <div>
          <!-- 分页导航 -->
        <nav style="float: left;">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
        </nav>
        <div style="float: right;margin-top: 25px;">
            <span>共100条记录，分20页显示</span>
        </div>
      </div>
    </div>
    
    <!-- 添加用户模态框 -->
    <div class="modal fade" id="user-add" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <h3 class="text-center">添加用户</h3>

	        <form action="/0327/addUser" method="post">
	            <div class="form-group">
	              <label for="user">用户名：</label>
	              <input type="text" class="form-control" name="username" placeholder="请输入用户名">
	            </div>
				<div class="form-group">
					<label for="user">用户昵称：</label>
					<input type="text" class="form-control" name="nickname" placeholder="请输入昵称">
				  </div>
	            
	            <div class="form-group">
	              <label for="pass">密码：</label>
	              <input type="password" class="form-control" name="password" placeholder="请输入密码">
	            </div>
	            
	            <div class="text-center">	                
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        			<button type="button" class="btn btn-primary" onclick="save()">保存</button>
	            </div>         
	        </form>
	    </div>
	  </div>
	</div>
    
    <!-- 修改用户模态框 -->
    <div class="modal fade" id="user-edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <h3 class="text-center">修改用户</h3>

	        <form action="/0327/addUser" method="post">
	            <div class="form-group">
	              <label for="user">姓名：</label>
	              <input type="text" class="form-control" name="username" id="user" placeholder="请输入姓名">
	            </div>
	            
	            <div class="form-group">
	              <label for="pass">密码：</label>
	              <input type="password" class="form-control" name="password" id="pass" placeholder="请输入姓名">
	            </div>
	            
	            <div class="form-group">
	                <label for="gender">性别：</label>
	                <label class="radio-inline">
	                   <input type="radio" name="sex" id="gender1" value="男"> 男 
	                </label>
	                <label class="radio-inline">
	                   <input type="radio" name="sex" id="gender2" value="女"> 女 
	                </label>
	            </div>
	            
	            <div class="form-group">
	                <label for="birthday">出生日期：</label>
	                <input type="text" class="form-control" name="birthday" id="birthday" placeholder="请输入出生日期">
	            </div>
	            
	            
	            <div class="form-group">
	                <label for="email">邮箱：</label>
	                <input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱">
	            </div>
	            <div class="form-group">
	                <label for="nickname">昵称：</label>
	                <input type="text" class="form-control" name="name" id="nickname" placeholder="请输入昵称">
	            </div>
	            <div class="text-center">	   
	            	<input type="hidden" name="id" id="uid">             
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        			<button type="button" class="btn btn-primary" onclick="update()">保存</button>
	            </div>  
	               
	        </form>
	    </div>
	  </div>
	</div>
    <script>

    	//发送ajax请求查询用户列表
    	getUser();
    	function getUser(){
    		$.ajax({
        		url:"http://localhost:8080/0506/list",	//服务器地址
        		type:"POST",	//请求服务器的方式
        		data:"",		//携带的数据
        		dataType:"json",//期望服务器返回的数据类型
        		success:function(result){
        			console.log(result)
        			if(result.length > 0){
        				var tr = "";
        				for(var i=0;i<result.length;i++){
        					var user = result[i];
        					tr += '<tr>';
        					tr += '<td><input type="checkbox" name="uid" value="'+user.id+'"></td>';
        					tr += '<td>'+user.id+'</td><td>'+user.username+'</td>';
        					tr += '<td>'+user.password+'</td><td>'+user.sex+'</td>';
        					tr += '<td>'+user.birthday+'</td><td>'+user.name+'</td><td>'+user.email+'</td>';
            		        tr += '<td><a class="btn btn-default btn-sm" onclick="openUserEdit('+user.id+')">修改</a>&nbsp;';
            		        tr += '<a class="btn btn-default btn-sm" onclick="delUserById('+user.id+')">删除</a></td>';
            		        tr += '</tr>';    					   		            
        				}
        				//将tr放到table里面
        				$('#user-list tbody').html(tr);
        			}
        		},
        		error:function(xhr,msg,e){
        			
        		},
        		beforeSend:function(){
        			
        		},
        		complete:function(){
        			
        		}
        	})
    	}
    	
    	//点击添加用户按钮时，显示模态框
    	function openUserAdd(){
    		$("#user-add").modal({
    			show:true	//显示模态框
    		})
    	}
    	
    	//保存用户信息
    	function save(){
    		console.log($("#user-add form").serialize())
    		$.ajax({
    			url:"http://localhost:8080/0506/saveUser",
    			type:"post",
    			data:$("#user-add form").serialize(),
    			dataType:"json",
    			success:function(res){
    				if(res.flag){
    					//添加成功
    					//关闭模态框
    					$('#user-add').modal('hide')
    					
    					//重新查询用户列表
    					getUser();
    				}else{
    					//添加成功
    					alert("添加失败,请重试");
    				}
    			}
    		})
    	}
    	
    	//弹出编辑用户模态框
    	function openUserEdit(uid){
    		//展示模态框
    		$("#user-edit").modal({
    			show:true	//显示模态框
    		})
    		//根据用户id查询用户信息
    		$.get(
    			"http://localhost:8080/0506/getUserById", //请求的服务器地址
    			{"uid":uid},							  //请求服务器时携带的数据
    			function(res){							  //请求成功时回调函数
    				console.log(res) 
    				// {id: 2, username: "李四光", password: "admin123", sex: "女", email: "lisi@qq.com", …}
    				$("#user").val(res.username);
    				$("#pass").val(res.password);
    				$("#birthday").val(res.birthday);
    				$("#email").val(res.email);
    				$("#nickname").val(res.name);
    				if($("#gender1").val() == res.sex){
    					$("#gender1").attr("checked",true)
    				}
    				if($("#gender2").val() == res.sex){
    					$("#gender2").attr("checked",true)
    				}
    				//设置隐藏域中的id
    				$("#uid").val(res.id)
    			},						
    			"json"									  //期望服务器返回的数据格式
    		)
    	}
    	
    	//更新用户
    	function update(){
    		
    		console.log($("#user-edit form").serialize());
    		
    		//将修改表单中的内容提交给服务器
    		$.ajax({
    			url:"http://localhost:8080/0506/updateUser",
    			type:"post",
    			data:$("#user-edit form").serialize(),
    			dataType:"json",
    			success:function(res){
    				if(res.flag){
    					//添加成功
    					//关闭修改用户模态框
    					$('#user-edit').modal('hide')
    					
    					//重新查询用户列表
    					getUser();
    				}else{
    					//添加成功
    					alert("添加失败,请重试");
    				}
    			}
    		})
    	}    	
    	function search(){
    		$.ajax({
    			url:"http://localhost:8080/0506/list",
    			type:"post",
    			data:$("#search-user form").serialize(),
    			dataType:"json",
    			success:function(res){
    				if(res.flag){
    					
    					//重新查询用户列表
    					getUser();
    				}else{
    					//添加成功
    					alert("添加失败,请重试");
    				}
    			}
    		})
    	}
    	
    	//单个删除用户
    	function delUserById(uid){
    		//1. 弹出确认框，提示用户是否确认删除
    		var res = confirm("您确认要删除吗?");
    		if(res){
    			//确认删除
    			$.post(
    				"http://localhost:8080/0506/delete",
    				{"uid":uid},
    				function(res){
    					if(res.flag){
    						alert("删除成功");
    						//重新查询用户列表
        					getUser();
    					}else{
    						alert("删除失败")
    					}
    				},
    				"json"
    			)
    		}
    	} 	
    	
    	//批量删除
    	$("#firstCb").click(function(){
    		
    		//attr()方法只能获取标签上面存在的属性
    		//prop()方法和attr用法一样，可以获取标签不存在的属性,以后使用prop()代替attr
    		
    		//获取点击的复选框的checked属性值
    		var checked = $(this).prop("checked");   
    		//alert(checked)
    		$("#user-list tbody input").prop("checked",checked);
    	})
    	
    	
    	//批量删除
    	function deleteByPath(){
    		if(confirm("您确认要删除吗?")){
    			//说明确认删除
    			//发送ajax请求
    			
    			//保存用户的id
    			var ids = [];
    			
    			//获取选中的用户id
    			$("#user-list tbody input").each(function(index,item){
    				//item---> <input type="checkbox" name="uid" value="15">
    				//$(item)将输入框转换成jquery对象
    				if($(item).prop("checked")){
    					//说明该复选框被选中了
    					//获取后面的用户id
    					var uid = $(item).parent().next().text();
    					ids.push(uid);
    				}
    			})
    			
    			//将[15,17,19],转换成字符串传递到服务器
    			var sid = ids.join(","); //使用逗号将数组元素转换成字符串 15,17,19
    			
    			$.post(
    				"http://localhost:8080/0506/delete",
    				{"uid":sid},
    				function(res){
    					if(res.flag){
    						//删除成功
    						alert("删除成功");
    						getUser();
    					}else{
    						//删除失败
    						alert("删除失败");
    					}
    				},
    				"json"
    			)
    		}
    	}
    	
    </script>
    
</body>
</html>